<template>
  <div>
    <!-- v-show 和 v-if 功能: 控制盒子的显示隐藏 -->
    <!-- 1. v-show 语法: v-show="布尔值" (true显示, false隐藏) 原理:
    实质是在控制元素的 css 样式, `display: none;` -->
    <!-- <div v-show="flag">I am盒子</div> -->

    <!-- 2. v-if 语法: v-if="布尔值" (true显示, false隐藏) 原理: 实质是在动态的创建
    或者 删除元素节点 -->
    <!-- <div v-if="flag">My is盒子</div> -->

    <!-- 课堂小案例 -->
    <!-- <img
      src="./assets/v2-597a23f8427f41a41dfd2f5b8474d09d_r.jpg"
      alt=""
      v-show="flag"
    />
    <button @click="toggle">点击以后显示隐藏</button> -->

    <!-- <div v-show="age >= 16 ? true : false">少儿不宜</div> -->

    <!-- 课堂小案例 -->
    <div v-if="age >= 60">60岁以上,唱跳rop</div>
    <div v-else-if="age >= 30">30岁以上,抽烟喝酒烫头</div>
    <div v-else-if="age >= 20">20岁以上,喝茶下棋</div>
    <div v-if="age < 20">20岁以下,练习广场舞</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
      age: 30,
    }
  },
  methods: {
    // 控制图片显示和隐藏
    toggle() {
      this.flag = !this.flag
    },
  },
}
</script>

<style scoped></style>
